<template>
	<view class="out_box">
		<div class="menu_val">
			<div class="pre_line">
				<!-- 指示条 -->
			</div>
			<div class="menu_val_box">
				<p class="content">目的地</p>
				<img  class="icon" :src="require('@/assets/images/箭头右.png')" alt="">
			</div>
			<div class="menu_two">
				<div class="menu_two_val">
					<img class="icon" :src="require('@/assets/images/菜单.png')" alt="" srcset="">
					<div class="name_val">旅行论坛</div>
					<img class="icon" :src="require('@/assets/images/右箭头.png')" alt="" srcset="">
					<div class="menu_three">
						<div class="section_title">
							<span>热门板块</span>
							<div class="more_box">
								<span>热门板块</span>
								<img class="icon" :src="require('@/assets/images/右箭头.png')">
							</div>
						</div>
						<dl class="section_item">
							<dt>兴趣小组</dt>
							<dd>
								<span>结伴同游</span>
								<span>签证</span>
								<span>结伴同游</span>
								<span>签证</span>
								<span>结伴同游</span>
								<span>签证</span>
								<span>结伴同游</span>
								<span>签证</span>
								<span>结伴同游</span>
								<span>签证</span>
								<span>结伴同游</span>
								<span>签证</span>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default{
		name:'MenuOne',
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
	.menu_val {
		height: 100%;
		position: relative;
		white-space: normal;

		.pre_line {
			width: 100%;
			height: 0px;
			background-color: white;
			z-index: 1;
			position: absolute;
			transition: height 0.1s linear;
		}

		.menu_val_box {
			padding: 0px 12px 0px 12px;
			z-index: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			white-space: normal;

			.content {
				color: #fff;
				font-weight: 600;
				font-size: 16px;
				white-space: normal;
				flex-shrink: 0;
			}

			.icon {
				width: 16px;
				height: 16px;
				transform: rotate(90deg);
				margin-left: 4px;
				flex-shrink: 0;
			}
		}

		.menu_two::before {
			content: "";
			display: block;
			position: absolute;
			top: -12px;
			left: 22px;
			width: 0;
			height: 0;
			font-size: 0;
			border-color: transparent transparent #fff;
			border-style: solid;
			border-width: 6px 4px
		}

		.menu_two {
			position: absolute;
			display: none;
			padding: 8px 0px;
			top: 55px;
			z-index: 200;
			border-radius: 4px;
			background: #fff;
			box-shadow: 0 0 3px rgba(0, 0, 0, .1);
			line-height: 30px;
			white-space: nowrap;

			.menu_two_val {
				width: auto;
				padding: 0px 8px;
				display: flex;
				align-items: center;

				.name_val {
					color: #636363;
					font-size: 16px;
					flex-shrink: 0;
					padding: 0px 4px;
				}

				.icon {
					width: 16px;
					height: 16px;
				}

				.menu_three {
					position: absolute;
					display: none;
					width: 460px;
					z-index: 200;
					border-radius: 4px;
					min-width: 100px;
					top: 0;
					left: 100%;
					padding: 4px 12px;
					background: 0 0;
					white-space: normal;
					background: #fff;
					box-shadow: 0 0 3px rgba(0, 0, 0, .1);

					.section_title {
						font-size: 16px;
						line-height: 30px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.more_box {
							display: flex;
							align-items: center;
						}

						.icon {
							width: 16px;
							height: 16px;
						}
					}

					.section_item {
						border-top-style: solid;
						border-top: 1px dashed #ededed;
						padding-left: 90px;
						line-height: 26px;
					}

					.section_item dt {
						float: left;
						margin-left: -90px;
						padding-top: 8px;
						font-size: 16px;
						color: #323232;
					}

					.section_item dd {
						padding: 8px 0px;
					}

					.section_item dd span {
						padding: 5px 8px;
						font-size: 14px;
						line-height: 14px;
						white-space: nowrap;
						color: #636363;
					}

					.section_item dd span:hover {
						background-color: rgba(255, 0, 0, .1);
						;
					}
				}
			}

			.menu_two_val_choosed {
				background-color: rgba(255, 0, 0, .1);
			}
		}
	}
</style>